<template>
  <div class="helpDetailMain">
    <TopBar :pageTo="backAddr" :titleName="title"></TopBar>
    <div class="main">
      <div class="userinfo">
        <img v-bind:src="detail.avatar" class="image" />
        <div class="info">
          <div class="author">{{ detail.author }}</div>
          <div class="time">{{ detail.time }}</div>
        </div>
      </div>
      <div class="title">{{ detail.title }}</div>
      <div class="desc">{{ detail.desc }}</div>
    </div>
    <van-tabs v-model="active" class="tabs" :color="color">
      <van-tab>
        <template #title> 点赞{{ detail.goods.length }} </template>
        <div class="good-item" v-for="(i, index) in detail.goods" :key="index">
          <div class="good-user">
            <img v-bind:src="i.avatar" class="image" />
            <div class="name">{{ i.name }}</div>
          </div>
          <div class="good-time">{{ i.time }}</div>
        </div>
      </van-tab>
      <van-tab>
        <template #title> 评论{{ detail.discusses.length }} </template>
        <div
          class="discuss-item"
          v-for="(i, index) in detail.discusses"
          :key="index"
        >
          <img v-bind:src="i.avatar" class="image" />
          <div>
            <div class="discuss-name">{{ i.name }}</div>
            <div class="discuss-time">{{ i.time }}</div>
            <div class="discuss-comment">{{ i.comment }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TopBar from "../components/TopBar";

export default {
  name: "HelpDetails",
  components: {
    TopBar,
  },
  data() {
    return {
      backAddr: "/community/neighbourhoodhelp",
      title: "邻里互助",
      color: "#64b587",
      detail: {
        title: "交通卡丢失",
        desc: "今天下午，在小区大门到A栋之间遗失了交通卡。请大家帮忙留意一下。",
        avatar: require("../assets/avatar/Charactor01.png"),
        author: "李浩",
        time: "2021-6-3",
        goods: [
          {
            avatar: require("../assets/avatar/Charactor04.png"),
            name: "张三",
            time: "2021-6-3",
          },
          {
            avatar: require("../assets/avatar/Charactor05.png"),
            name: "李四",
            time: "2021-6-4",
          },
        ],
        discusses: [
          {
            avatar: require("../assets/avatar/Charactor05.png"),
            name: "李四",
            time: "2021-6-4",
            comment: "hhhhhh",
          },
        ],
      },
    };
  },
};
</script>
<style lang="scss">
body {
    background-color: #f6f7f7;
}
.helpDetailMain {
  width: 375px;
  margin: 0;
}
.main {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  .userinfo {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    .image {
      width: 60px;
      height: 60px;
    }
    .info {
      margin: 10px 0px 0px 10px;
      .time {
        color: #b9b9b9;
      }
    }
  }
  .title {
    width: 100%;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .desc {
    width: 100%;
    padding-bottom: 10px;
  }
}
.tabs {
  margin-top: 10px;
}

.good-item {
  padding: 5px 10px 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  .good-user {
    display: flex;
    align-items: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 500;
    .name {
      margin-left: 10px;
    }
    .image {
      width: 50px;
      height: 50px;
    }
  }
  .good-time {
    color: #b9b9b9;
  }
}
.discuss-item {
  padding: 5px 10px 5px 10px;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  .image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .discuss-name {
    font-size: 14px;
    font-weight: bold;
  }
  .discuss-time {
    font-size: 14px;
    color: #b9b9b9;
    margin-bottom: 5px;
  }
}
</style>